<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-3</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size: 20px;
    }

    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }

    #container {
        width: 920px;
        margin: 0px auto;
        font-size: 20px;
    }
    /*标题栏*/
    #header {
        background: white;
    }
    /*菜单栏*/
    #menu {
        width: 860px;
        margin: 2px auto;
        background: white;
        height: 100%;
    }

    #menu ul {
        list-style: none;
    }

    #menu ul li {
        width: 120px;
        float: left;
        color: #888;
        text-align: center;
    }

    #menu ul li a {
        text-decoration: none;
        color: #00f;
    }

    /*鼠标悬空在菜单栏上方时，字体改颜色，字型加粗，字体变大 1 像素。*/
    #menu ul li a:hover {
        color: #f60;
        font-size: 21px;
        font-weight: bold;
        font-family: simHei
    }

    #pagebody {
        margin: 0 auto;
        border: 1px red solid;
        overflow: hidden;
    }
    
    /*左侧栏：内容超出时显示滑动条 overflow:auto;*/
    #leftbar {
        width: 220px;
        height: 300px;
        background: lime;
        overflow: auto;
        float: left;
        margin-right: 15px;
    }

      /*内容主体*/
    #content {
        background: orange;
        float: left;
        width: 450px;
        margin-right: 15px
    }

    /*右侧栏：内容超出时不显示 overflow:hidden*/
    #rightbar {
        width: 218px;
        height: 250px;
        background: lime;
        overflow: hidden;
        float: right;
        white-space: wrap;
    }

    /*脚部内容*/
    #footer {
        width: 100%;
        height: 60px;
        /*脚部的高度*/
        background: #6cf;
        text-align: center;
        line-height: 60px;
    }

    #pagebody p {
        text-indent: 2em;
        margin: 10px
    }

    #footer p {
        font-size: 14px;
        color: #444444;
    }
    </style>
</head>

<body>
    <div id="container">
        <div id="header"><img alt="图片" src="header.jpg"> </div>
        <div id="menu" class="clearfix">
            <ul>
                <li><a href="#">学校概况</a><br>Survey</li>
                <li><a href="#">仲园新闻</a><br>News</li>
                <li><a href="#">招生信息</a><br>Recruit</li>
                <li><a href="#">最新公告</a><br>Bulletin</li>
                <li><a href="#">院系结构</a><br>Hiberarchy</li>
                <li><a href="#">网络服务</a><br>Service</li>
                <li><a href="#">联系我们</a><br>Contact</li>
            </ul>
        </div>
        <div id="pagebody" class="clearfix">
            <div id="leftbar">
                <p>这是左侧栏</p>
                <p>为争取社会各界支持办学，促进学校发展，1987年4月，根据国家副主席王震提议，经中共广东省委同意，成立了学校董事会，王震任名誉董事长，广东省省长叶选平任董事长。1997年，广东省省长卢瑞华任第二届董事会董事长。2008年，广东省省长黄华华任第三届董事会董事长。董事会成员由国家领导人、省部级领导以及港澳知名人士担任。
                </p>
            </div>
            <div id="content">
                <p>这是正文</p>
                <p>仲恺农业工程学院是一所以农、工学科为优势，农、工、理、经、管、文协调发展的多科性省属本科大学。学校坐落在历史文化名城——广州，校园集云山之神秀，汇珠水之灵气，是读书治学的理想园地。
                </p>
                <p>
                 学校前身为仲恺农工学校，是第一次国共合作时期，近代民主革命著名的政治活动家何香凝先生等提议、国民党中央为纪念廖仲恺先生爱护农工的意愿而决定创办的。学校于1927年招生，何香凝先生首任校长15年。1984年，经教育部、农牧渔业部批准，学校升格为本科院校，定名“仲恺农业技术学院”，国家副主席王震同志题写校名。2008年3月，经教育部批准，更名“仲恺农业工程学院”。
             	</p>
            </div>
            <div id="rightbar">
                <p>右侧栏</p>
                <p>近年来，学校先后被评为全国暑期“三下乡”社会实践先进单位、广东省回乡大学生开展农业科技下乡活动先进单位、广东省青年志愿服务优秀集体、广东省教育系统纪检监察先进集体、广州地区建立侨捐监督管理制度工作先进集体、广州市文明单位，在管理和社会服务方面得到了社会广泛认可。</p>
            </div>
        </div>
        <div id="footer" class="clearfix">
            <p>粤ICP备05008893号 Copyright ©2008 中国·广东·仲恺农业工程学院 邮编:510225 Tel:+8620-89003114</p>
        </div>
    </div>
</body>

</html>